<template>
  <div>
      <PageHead />
      <div class="app-main">
        <div class="left">
          <Left :module-data="moduleList" />
        </div>
        <div class="main">
          <Main :pageData="pageData" />
        </div>
        <div>
          <Right :pageData="pageData" />
        </div>
      </div>
  </div>
</template>

<script>
import Left from "./components/Left";
import Right from "./components/Right";
import Main from "./components/Main";
import PageHead from "./components/PageHead";
export default {
  name: "Index",
  data() {
    return {
      modlue: "",
      moduleList: [],
      pageData: [],
    };
  },
  components: {
    Left,
    Right,
    Main,
    PageHead
  },
  methods: {
    getPage() {
      let id = this.$route.query.id;
      this.$http.post("/page/get", { id: id }).then((res) => {
        this.$store.commit("CONFIG_SET", { pageInfo: res.data });
        this.getModule(res.data);
      });
    },
    getModule(pageInfo) {
      this.$http .post("/module/get", { module_name: pageInfo.seed.moduleList.map(v => v.module_name).join(",") })
        .then((res) => {
          this.moduleList = res.data.map((v, i) => {
            return {
              ...v,
              schema: pageInfo.seed.moduleList.find(v1 => (v.module_name === v1.module_name)).schema,
              edition: pageInfo.seed.moduleList.find(v1 => (v.module_name === v1.module_name)).edition,
              props: {},
            };
          });

          window.moduleList = this.moduleList;
          this.pageData = pageInfo.pageData.map((v) => {
            let props;
            try {
              props = JSON.parse(v.props);
            } catch (e) {
              props = {};
            }
            return {
              ...this.moduleList.find((v1) => v.module_name === v1.module_name),
              ...v,
              props: props || {},
            };
          });
          this.$store.commit("CONFIG_SET", {
            pageData: this.pageData,
            pageInfo: pageInfo,
            moduleList: this.moduleList
          });
        });
    },
  },
  created() {
    this.getPage();
    window.init = this.getPage;
  },
};
</script>
<style lang="stylus" scoped>
.app-main {
  display: flex;

  .left {
    width: 400px;
  }

  .main {
    flex: 1;
  }
}
</style>
